<template>
    <div class="container">
        <h3>物料信息</h3>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="150px" class="demo-ruleForm">
  
            <el-row>
                <el-button type="primary" v-if="id == undefined"  @click="openlist" style="float:right; margin-right: 10px">选择物资</el-button>
                <el-table
                :data="list"
                style="width: 100%;margin-top:40px;">
                <el-table-column
                    prop="materialName"
                    label="物料名称"
                    >
                </el-table-column>
                <el-table-column
                    prop="materialSpecification"
                    label="规格"
                    >
					
                </el-table-column>
                <el-table-column
                    prop="unit"
                    label="单位"
                    >
					
                </el-table-column>
                <el-table-column
                    prop="materialType"
                    label="类型"
                    >
					
                </el-table-column>
              
                <el-table-column
					width="120"
                    label="操作" v-if="id == undefined">
                    <template slot-scope="scope">
                        <el-button type="text" @click="deletelist(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table> 
             <h3 style="margin-top:20px">养护信息</h3>
             
            
            </el-row>
            	 <el-form-item label="养护工艺名称：" prop="standard">
						<el-input placeholder="请输入内容" v-model="technology" style="width:300px"></el-input>
					</el-form-item>
             <el-table

                :data="ruleForm.curingList"
                style="width: 100%;margin-top:20px;">
                <el-table-column
                    prop="content"
                    label="养护检查内容"
                    >
					<!-- <el-input v-model></el-input> -->
					<template slot-scope="scope">
						<el-input v-model="scope.row.content" style="width:300px"></el-input>
					</template>
                </el-table-column>
                <el-table-column
                    prop="standard"
                    label="养护标准/方法"
                    >
					<template slot-scope="scope">
						<el-input v-model="scope.row.standard" style="width:300px"></el-input>
					</template>
                </el-table-column>
                <el-table-column
					width="120"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="deletecuring(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table> 
			<el-col class="add" @click.native="add">+添加一条</el-col>
            <el-form-item class="footerFixed" label-width="0px">
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>





        </el-form>


            <el-dialog title="选择物料" customClass="500px" :visible.sync="show">

			   <el-form label-width="120px">
                   <el-select v-model="value" placeholder="请选择" style="width: 15%;margin: 0 10px;"  @change="init1">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    
                    <el-input placeholder="请输入关键词" v-model="searchName1" style="width:300px;">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        <el-button slot="append" @click="handleSearch1">搜索</el-button>
                    </el-input>
                    <el-table
                        :data="tableData1"
                        border
                        style="margin-top:20px;"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="materialName" sortable label="物料名称"></el-table-column>
                        <el-table-column prop="materialCode" sortable label="物料代码"></el-table-column>
                        <el-table-column prop="materialType" sortable label="物料类型"></el-table-column>
                        <!-- <el-table-column prop="createTime" sortable label="添加时间"></el-table-column> -->
                        <el-table-column prop="materialSpecification" sortable label="规格">
                            <template slot-scope="scope">
                                {{scope.row.materialSpecification}}{{scope.row.unit}}
                            </template>
                        </el-table-column>
                       
                    </el-table>
                   
			   </el-form>
			  
			    <div slot="footer" class="dialog-footer">
			        <el-button @click="close">取 消</el-button>
			        <el-button type="primary" @click="save">确 定</el-button>
			    </div>
			</el-dialog>
    </div>
</template> 

<script>
    import {curing_psave,curing_findById,model_crop_loadbind} from "@/request/api" 
     import {materialManagement_findBylistNoPage} from "@/request/produceApi"
    export default {
        data(){
            return{
                technology:'',
                options: [{
                value: '原料',
                label: '原料'
                }, {
                value: '辅料',
                label: '辅料'
                }, {
                value: '半成品',
                label: '半成品'
                }, {
                value: '成品',
                label: '成品'
                }],
                value: '',
                list:[],
                ruleForm:{
					name:'',
					technology:'',
                    curingList:[
                        {content:'',standard:''}
                    ]
                },
                searchName1:'',
                labelPosition:"right",
                rules:{},
                basesourcelist:[],
				id:'',
                show:false,
                tableData1:[],
                currentPage1:1,
                pagesize:10,
                total1:0,
                selectlist:[]
            }
        },
        mounted(){
			this.id = this.$route.query.id
			if(this.id != undefined){
				this.init()
			}
            this.init1()
            // this.getbasesource()
        },
        methods:{
            deletelist(index,row){
                this.list.splice(index,1)
            },
             handleSelectionChange(val) {
                // this.multipleSelection = val;
                this.selectlist = val
                // console.log(val)
            },
            handleSearch1() {
               this.init1()
            },
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
            init1(){
                let data = {
                    materialType:this.value,
                    materialName:this.searchName1
                }
                materialManagement_findBylistNoPage(data).then((res) => {
                    this.tableData1 = res.data
                })
            },
            close(){
                this.show = false
            },
            save(){
                this.show = false
                this.list = this.list.concat(this.selectlist)
            },
            openlist(){
                this.show = true
            },
			init(){
				curing_findById(this.id).then((res)=>{
					this.ruleForm.curingList = res.data.curingList
                    this.technology = res.data.technology
                    // console.log(11)
                    this.list.push({materialName:res.data.name,materialSpecification:res.data.spec,unit:res.data.unit,materialType:res.data.type,id:res.data.id})
                   
				})
			},
            deletecuring(index,row){
                this.ruleForm.curingList.splice(index,1)
            },
			add(){
				this.ruleForm.curingList.push({content:'',standard:''})
			},
            getbasesource(){
                model_crop_loadbind("").then((res)=>{
                    this.basesourcelist = res.data
                })
            },
            submitrule(){
                if(this.list.length < 1){
                    this.$notify({
                        title: '提示',
                        message: '物料不能为空',
                        type: 'info',
                        duration: 1000
                    });
                }else{
                    var arr = []
                    for(var i=0;i<this.list.length;i++){
                        arr.push({technology:this.technology,name:this.list[i].materialName,spec:this.list[i].materialSpecification,unit:this.list[i].unit,type:this.list[i].materialType,id:this.list[i].id})
                        
                    }
                    arr[0].curingList = this.ruleForm.curingList
                    // console.log(arr)
                    if(this.id == undefined){
                        curing_psave(arr).then((res)=>{
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.$router.go(-1);
                        })
                    }else{
                        curing_psave(arr).then((res)=>{
                            this.$notify({
                                title: '提示',
                                message: '修改成功',
                                type: 'success',
                                duration: 1000
                            });
                            this.$router.go(-1);
                        })
                    }
                }
                
               
            },
            backPage(){
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped>
.add{
    background-color: rgba(235, 245, 255, 1);
    border: 1px dotted lightgray;
    color: #333;
    margin: 10px 0 0 0;
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
  }
  .el-pagination{
    text-align: center;
}
/* .el-row{ margin-bottom: 20px;} */
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom:0;
}
</style>
